<template>
  <div style="font-size: 20px; padding: 20px; background-color: #fff">
    <van-uploader
      v-model="fileList"
      multiple
      :after-read="afterRead"
      result-type="file"
      @delete="deleteImg"
    />
    <div>
      <van-button type="primary" @click="handleOpencv(1)">灰度化</van-button>
      <van-empty v-if="!grayImgUrl" description="暂无图片" />

      <van-image
        v-else
        fit="contain"
        style="display: block"
        width="200"
        height="200"
        :src="grayImgUrl"
        @click="imgClick(1)"
      />
      <van-image-preview
        v-model="showGrayImg"
        :images="[grayImgUrl]"
        :showIndex="false"
        closeable
      />
    </div>
    <div>
      <van-button type="primary" @click="handleOpencv(2)">高斯滤波</van-button>
      <div>kSize.width</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="guassParam.width"
        min="0"
        max="50"
        @change="onChange"
      />
      <div>kSize.height</div>
      <van-stepper
        input-width="100px"
        v-model="guassParam.height"
        min="0"
        max="50"
        @change="onChange"
      />
      <div>sigmaX</div>
      <van-stepper
        decimal-length="1"
        input-width="100px"
        step="0.1"
        v-model="guassParam.sigmaX"
        min="0"
        max="50"
        @change="onChange"
      />
      <div>sigmaY</div>
      <van-stepper
        decimal-length="1"
        input-width="100px"
        step="0.1"
        v-model="guassParam.sigmaY"
        min="0"
        max="50"
        @change="onChange"
      />
      <van-empty v-if="!gaussImgUrl" description="暂无图片" />
      <van-image
        v-else
        fit="contain"
        style="display: block"
        width="200"
        height="200"
        :src="gaussImgUrl"
        @click="imgClick(2)"
      />
      <van-image-preview
        v-model="showGaussImg"
        :images="[gaussImgUrl]"
        :showIndex="false"
        closeable
      />
    </div>
    <div>
      <van-button type="primary" @click="handleOpencv(3)">二值化</van-button>
      <div>thresh</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="binParam.thresh"
        min="0"
        max="255"
        @change="onChange"
      />
      <van-empty v-if="!binImgUrl" description="暂无图片" />
      <van-image
        v-else
        fit="contain"
        style="display: block"
        width="200"
        height="200"
        :src="binImgUrl"
        @click="imgClick(3)"
      />
      <van-image-preview
        v-model="showBinImg"
        :images="[binImgUrl]"
        :showIndex="false"
        closeable
      />
    </div>
    <div>
      <van-button type="primary" @click="handleOpencv(4)">形态学</van-button>
      <div>shape</div>
      <van-radio-group v-model="morphParam.shape">
        <van-radio :name="1">矩形结构元</van-radio>
        <van-radio :name="2">椭圆形结构元</van-radio>
        <van-radio :name="3">十字结构元</van-radio>
      </van-radio-group>
      <div>kernelSize.w</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="morphParam.width"
        min="0"
        max="50"
        @change="onChange"
      />
      <div>kernelSize.h</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="morphParam.height"
        min="0"
        max="50"
        @change="onChange"
      />
      <div>morphType</div>
      <van-radio-group v-model="morphParam.type">
        <van-radio :name="1">闭运算</van-radio>
        <van-radio :name="2">开运算</van-radio>
        <van-radio :name="3">BLACKHAT</van-radio>
        <van-radio :name="4">TOPHAT</van-radio>
      </van-radio-group>
      <div>iterations</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="morphParam.count"
        min="0"
        max="50"
        @change="onChange"
      />
      <van-empty v-if="!morphImgUrl" description="暂无图片" />
      <van-image
        v-else
        fit="contain"
        style="display: block"
        width="200"
        height="200"
        :src="morphImgUrl"
        @click="imgClick(4)"
      />
      <van-image-preview
        v-model="showMorphImg"
        :images="[morphImgUrl]"
        :showIndex="false"
        closeable
      />
    </div>
    <!-- <div>
      <van-button type="primary" @click="handleOpencv(5)">阈值分割</van-button>
      <van-empty v-if="!ContImgUrl" description="暂无图片" />
      <van-image
        v-else
        fit="contain"
        style="display: block"
        width="200"
        height="200"
        :src="ContImgUrl"
        @click="imgClick(5)"
      />
      <van-image-preview
        v-model="showContImg"
        :images="[ContImgUrl]"
        :showIndex="false"
        closeable
      />
    </div> -->
    <div>
      <van-button type="primary" @click="handleOpencv(6)">轮廓发现</van-button>
      <div>deph</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="circleParam.deph"
        min="0"
        @change="onChange"
      />
      <div>minDist</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="circleParam.minDist"
        min="0"
        @change="onChange"
      />
      <div>p1</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="circleParam.p1"
        min="0"
        @change="onChange"
      />
      <div>p2</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="circleParam.p2"
        min="0"
        @change="onChange"
      />
      <div>minRadius</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="circleParam.minRadius"
        min="0"
        @change="onChange"
      />
      <div>maxRadius</div>
      <van-stepper
        input-width="100px"
        step="1"
        v-model="circleParam.maxRadius"
        min="0"
        @change="onChange"
      />
      <van-empty v-if="!(circles&&circles.length>0)" description="暂无数据" />
      <van-cell-group v-else v-for="(item,index) in circles" :key="index">
        <van-cell title="圆心" :value="'('+item.x+','+item.y+')'" />
        <van-cell title="半径" :value="item.z"/>
      </van-cell-group>
      <div>

      </div>
    </div>
    <div>
      <van-button type="primary" @click="handleOpencv(7)">输出结果</van-button>
      <van-empty v-if="!dstImgUrl" description="暂无图片" />
       <van-image
        v-else
        fit="contain"
        style="display: block"
        width="200"
        height="200"
        :src="dstImgUrl"
        @click="imgClick(4)"
      />
      <van-image-preview
        v-model="showDstImg"
        :images="[dstImgUrl]"
        :showIndex="false"
        closeable
      />
    </div>
    </div>
  </div>
</template>
<script>
// import cv from "opencv4js";
export default {
  data() {
    return {
      fileList: [], //上传成功列表
      value: 10,
      circles: [],

      //预览图显示控制
      showGrayImg: false,
      showGaussImg: false,
      showBinImg: false,
      showMorphImg: false,
      showContImg: false,
      showDstImg: false,

      //当前图片对象
      currentImg: {},
      currentImgUrl: "",

      //结果图片url
      grayImgUrl: "",
      gaussImgUrl: "",
      binImgUrl: "",
      morphImgUrl: "",
      contImgUrl: "",
      dstImgUrl: "",

      //请求参数
      guassParam: {
        width: 7,
        height: 7,
        sigmaX: 0,
        sigmaY: 0,
      },
      binParam: {
        thresh: 129,
      },
      morphParam: {
        shape: 1,
        width: 5,
        height: 5,
        type: 1,
        count: 1,
      },
      circleParam: {
        deph: 1,
        minDist: 20,
        p1: 100,
        p2: 60,
        minRadius: 0,
        maxRadius: 0,
      },
    };
  },

  created() {
    this.getImgList();
  },

  methods: {
    // 图片点击展示预览
    imgClick(index) {
      if (index == 1) {
        //灰度
        this.showGrayImg = true;
      } else if (index == 2) {
        //高斯
        this.showGaussImg = true;
      } else if (index == 3) {
        //二值
        this.showBinImg = true;
      } else if (index == 4) {
        //结果
        this.showDstImg = true;
      } else if (index == 5) {
        //二值
        this.showContImg = true;
      }
    },

    //向后端请求opencv图像处理
    handleOpencv(index) {
      if (index == 1) {
        //灰度化
        this.getGrayImg(this.currentImg);
      } else if (index == 2) {
        //高斯
        this.getGaussImg();
      } else if (index == 3) {
        //二值化
        this.getBinImg();
      } else if (index == 4) {
        //形态学
        this.getMorImg();
      } else if (index == 5) {
        //阈值分割
        this.getContImg();
      } else if (index == 6) {
        //轮廓
        this.getCircle();
      } else if (index == 7) {
        //输出结果
        this.getDstImg();
      }
    },

    //获取已经上传的图像列表
    getImgList() {
      this.$axios
        .get("http://121.41.30.105:3000/users/upload/list")
        .then((res) => {
          console.log(res.data.imgList);
          this.fileList = res.data.imgList;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取灰度图处理结果
    getGrayImg(img) {
      this.grayImgUrl = "";
      console.log(img);
      // img.path =
      //   "http://121.41.30.105:3000/loading/20210226182630959-1638175974479.png";
      img.path = this.currentImgUrl;
      this.$axios
        .get(`http://121.41.30.105:3000/users/get/grayimg?url=${img.path}`)
        .then((res) => {
          console.log(res.data.path); //返回灰度图的url;更新界面图片
          this.grayImgUrl = `${res.data.path}?time=${Math.random()}`;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取高斯模糊处理结果
    getGaussImg() {
      let grayImgUrl = this.grayImgUrl;
      if (grayImgUrl.indexOf("?") != -1) {
        grayImgUrl = grayImgUrl.slice(0, grayImgUrl.indexOf("?"));
      }
      console.log("grayImgUrl", grayImgUrl);
      this.$axios
        .get(
          `http://121.41.30.105:3000/users/get/gaussimg?url=${grayImgUrl}&width=${this.guassParam.width}&height=${this.guassParam.height}&sigmaX=${this.guassParam.sigmaX}&sigmaY=${this.guassParam.sigmaY}`
        )
        .then((res) => {
          console.log(res.data.path); //返回高斯模糊后的url;更新界面图片
          this.gaussImgUrl = `${res.data.path}?time=${Math.random()}`;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //获取二值化处理结果
    getBinImg() {
      let gaussImgUrl = this.gaussImgUrl;
      if (gaussImgUrl.indexOf("?") != -1) {
        gaussImgUrl = gaussImgUrl.slice(0, gaussImgUrl.indexOf("?"));
      }
      console.log("gaussImgUrl", gaussImgUrl);
      this.$axios
        .get(
          `http://121.41.30.105:3000/users/get/binimg?url=${gaussImgUrl}&thresh=${this.binParam.thresh}`
        )
        .then((res) => {
          console.log(res.data.path);
          this.binImgUrl = `${res.data.path}?time=${Math.random()}`;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //获取形态学处理结果
    getMorImg() {
      let binImgUrl = this.binImgUrl;
      if (binImgUrl.indexOf("?") != -1) {
        binImgUrl = binImgUrl.slice(0, binImgUrl.indexOf("?"));
      }
      console.log("morphParam", this.morphParam);
      this.$axios
        .get(
          `http://121.41.30.105:3000/users/get/morphimg?url=${binImgUrl}&shape=${this.morphParam.shape}&width=${this.morphParam.width}&height=${this.morphParam.height}&type=${this.morphParam.type}&count=${this.morphParam.count}`
        )
        .then((res) => {
          console.log(res.data.path);
          this.morphImgUrl = `${res.data.path}?time=${Math.random()}`;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //获取阈值分割处理结果
    getContImg() {
      let morphImgUrl = this.morphImgUrl;
      if (morphImgUrl.indexOf("?") != -1) {
        morphImgUrl = morphImgUrl.slice(0, morphImgUrl.indexOf("?"));
      }
      this.$axios
        .get(`http://121.41.30.105:3000/users/get/contimg?url=${morphImgUrl}`)
        .then((res) => {
          console.log(res.data.path);
          this.contImgUrl = `${res.data.path}?time=${Math.random()}`;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //获取圆
    getCircle() {
      let morphImgUrl = this.morphImgUrl;
      if (morphImgUrl.indexOf("?") != -1) {
        morphImgUrl = morphImgUrl.slice(0, morphImgUrl.indexOf("?"));
      }
      console.log("morphParam", this.circleParam);
      this.$axios
        .get(
          `http://121.41.30.105:3000/users/get/circle?url=${morphImgUrl}&deph=${this.circleParam.deph}&minDist=${this.circleParam.minDist}&p1=${this.circleParam.p1}&p2=${this.circleParam.p2}&maxRadius=${this.circleParam.maxRadius}&minRadius=${this.circleParam.minRadius}`
        )
        .then((res) => {
          console.log(res.data);
          this.circles = res.data.circle;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getDstImg() {
      // let circles = JSON.stringify(this.circles);
      this.$axios
        .post(`http://121.41.30.105:3000/users/draw/circles`, {
          circles: this.circles,
        })
        .then((res) => {
          console.log(res.data.path);
          this.dstImgUrl = `${res.data.path}?time=${Math.random()}`;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    onChange(e) {
      console.log(this.guassParam.width);
    },

    //删除图片
    deleteImg(img) {
      this.$axios
        .get(`http://121.41.30.105:3000/users/upload/delete?imgid=${img._id}`)
        .then((res) => {
          console.log(res);
          this.getImgList();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    afterRead(file) {
      console.log(file.file);
      this.uploadImg(file.file);
      console.log("fileList", this.fileList);
    },

    //上传图片
    uploadImg(file) {
      console.log("上传中");
      var formData = new FormData();
      //此处文件名必须为 pic ，因为后台设置仅接口此文件名
      formData.append("pic", file);
      this.$axios({
        method: "post",
        url: "http://121.41.30.105:3000/users/upload",
        data: formData,
      })
        .then((res) => {
          console.log(res.data);
          this.currentImg = res.data;
          this.currentImgUrl = res.data.path;
          this.getImgList();
        })
        .catch(function (err) {});
    },
  },
};
</script>

<style>
.van-slider {
  margin: 20px 0;
}
</style>
